<template>
  <div class="Rate-Demo-Page">

    <SkyCardPanel title="评分">
      <div slot="main">

        <sky-rate v-model="value1"></sky-rate>

        <hr class="hr">

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
             &lt;sky-rate v-model="value1"&gt;&lt;/sky-rate&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              
              export default {
                data () {
                  return {
                    value1: null,
                  }
                },
              }
              
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        value1: null,
      }
    },
  }
</script>

<style lang="scss" scoped>
.Rate-Demo-Page {
  & /deep/ .card-main {
    padding: 20px !important;
  }
}

.hr {
  margin: 20px 0;
}
</style>